<template>
  <div class="home-controller">
    <!-- 顶部导航栏 -->
    <div class="top-bar">
      <van-nav-bar>
        <template #title>
          <div class="top-title">{{ params.companyName }}</div>
        </template>
        <template #left>
          <div class="top-left"><img src="../../assets/imgs/Group@2x.png" /></div>
        </template>
        <template #right>
          <div class="top-right"><img src="../../assets/imgs/search2x.png" /></div>
        </template>
      </van-nav-bar>
    </div>
    <!-- /顶部导航栏 -->

    <!-- 评测信息栏 -->
    <div class="eva-controller">
      <div class="eva-condition">
        <div class="eve-font">本期测评</div>
        <div class="eva-state">{{ params.state }}</div>
      </div>
      <div class="eva-rate"><van-rate v-model="params.score" readonly color="#FFFFFF" /></div>
      <div class="eva-msg"><span>暂无评分</span></div>
    </div>
    <!-- /评测信息栏 -->

    <!-- 工作台 -->
    <div class="work-title">我的工作台</div>
    <div class="work-area">
      <div class="work-chunk1">
        <div class="area-icon"></div>
        <span>本期测评</span>
      </div>
      <div class="work-chunk2">
        <div class="area-icon"></div>
        <span>历史测评</span>
      </div>
      <div class="work-chunk3">
        <div class="area-icon"></div>
        <span>信息上报</span>
      </div>
    </div>
    <!-- /工作台 -->

    <!-- 通知公告 -->
    <div class="work-title">重要通知</div>
    <div class="work-inform">
      <van-cell title="单元格" icon="shop-o">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="search"/>
        </template>
      </van-cell>
      <van-cell title="单元格" icon="shop-o">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="search"/>
        </template>
      </van-cell>
    </div>
    <!-- /通知公告 -->
  </div>
</template>

<script>
export default {
  name: 'HomeIndex',
  components: {},
  props: {},
  data () {
    return {
      params: {
        companyName: '嘉兴红点科技有限公司',
        state: '待评审',
        score: 0
      },
      list: [],
      loading: false, // 控制加载中的loding状态
      finished: false // 控制加载结束的状态
    }
  },
  computer: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
  }
}
</script>

<style scoped lang="scss">
.top-bar {
  /deep/ .van-nav-bar {
    margin-top: 10px;
    height: 56px;
  }
  /deep/ .van-hairline--bottom::after {
    border-radius: 25px;
    box-shadow: 0px 5px 8px 0px #daebf9;
  }
  .top-title {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
  }
  .top-left {
    img {
      width: 36px;
    }
  }
  .top-right {
    img {
      width: 20px;
      height: 23px;
    }
  }
}
.eva-controller {
  margin-top: 12px;
  height: 197px;
  background-image: url(../../assets/imgs/BG@2x.png);
  background-size: 100% 100%;
  .eva-condition {
    display: flex;
    align-items: center;
    margin-left: 25px;
    padding-top: 38px;
    width: 204px;
    height: 40px;
    .eve-font {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 28px;
    }
    .eva-state {
      margin-left: 20px;
      text-align: center;
      width: 64px;
      height: 19px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 12px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      line-height: 18px;
    }
  }
  .eva-rate {
    margin-left: 20px;
    width: 120px;
    height: 22px;
  }
  .eva-msg {
    margin-left: 25px;
    margin-top: 8px;
    width: 110px;
    height: 41px;
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #ffffff;
    line-height: 30px;
  }
}
.work-title {
  margin-left: 19px;
  width: 128px;
  height: 18px;
  font-size: 15px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #000000;
  line-height: 27px;
  font-weight: bold;
}
.work-area {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction:row;
  overflow-x:auto;
  overflow-y:hidden;
  margin-top: 17px;
  margin-left: 19px;
  margin-bottom: 26px;
  height: 140px;
  &::-webkit-scrollbar {display:none}
  .work-chunk1 {
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    flex-shrink:0;
    margin-right: 15px;
    width: 120px;
    height: 140px;
    background: linear-gradient(57deg, #425bf1 0%, #47caec 100%);
    box-shadow: 0px 3px 5px 0px rgba(20, 89, 255, 0.52);
    border-radius: 8px;
    .area-icon{
      width: 54px;
      height: 54px;
      background-image: url(../../assets/imgs/ceping2x.png);
      background-size: 100% 100%;
    }
    span{
      margin-top: 18px;
      width: 72px;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 22px;
    }
  }
  .work-chunk2 {
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    flex-shrink:0;
    margin-right: 15px;
    width: 120px;
    height: 140px;
    background: linear-gradient(137deg, #391DA8 0%, #BE5FD6 100%);
    box-shadow: 0px 3px 5px 0px rgba(59, 39, 178, 0.62);
    border-radius: 8px;
    .area-icon{
      width: 54px;
      height: 54px;
      background-image: url(../../assets/imgs/lishi2x.png);
      background-size: 100% 100%;
    }
    span{
      margin-top: 18px;
      width: 72px;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 22px;
    }
  }
  .work-chunk3 {
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    flex-shrink:0;
    margin-right: 15px;
    width: 120px;
    height: 140px;
    background: linear-gradient(135deg, #FF6696 0%, #FF9D76 100%);
    box-shadow: 0px 3px 5px 0px rgba(124, 18, 92, 0.53);
    border-radius: 8px;
    .area-icon{
      width: 54px;
      height: 54px;
      background-image: url(../../assets/imgs/ceping2x.png);
      background-size: 100% 100%;
    }
    span{
      margin-top: 18px;
      width: 72px;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 22px;
    }
  }
}
.work-inform{
  margin-top: 25px;
  background-color: orange;
  height: 200px;
}
</style>
